import React, { memo } from "react"
import { useEffect } from "react"
import { useState } from "react"

function useLogLife(CName) {
    useEffect(() => {
        console.log(`${CName}组件被创建`)
        return () => {
            console.log(`${CName}组件被销毁`)
        }
    }, [CName])
}

const Home = () => {
    useLogLife("Home")
    return (
        <div>
            <h1>Home</h1>
        </div>
    )
}

const About = () => {
    useLogLife("About")

    return (
        <div>
            <h1>About</h1>
        </div>
    )
}

const App = memo(() => {
    const [isShow, setIsShow] = useState(true)
    useLogLife("App")

    return (
        <div>
            <h1>App Component</h1>
            <button onClick={() => setIsShow(!isShow)}>切换</button>
            {isShow && <Home />}
            {isShow && <About />}
        </div>
    )
})

export default App
